<template>
	<div class="dashboard-editor-container">
		<el-row>
			<el-col :span="12" class="panel-group">
				<el-col class="card-panel-col">
					<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
						<div class="card-panel-icon-wrapper icon-people">
							<svg-icon icon-class="peoples" class-name="card-panel-icon"/>
						</div>
						<div class="card-panel-description">
							<div class="card-panel-text">商品数量</div>
							<count-to :start-val="0" :end-val="goodsCount" :duration="2600" class="card-panel-num"/>
						</div>
					</div>
				</el-col>
			</el-col>
			<el-col :span="12" class="panel-group">
				<el-col class="card-panel-col">
					<div class="card-panel" @click="handleSetLineChartData('messages')">
						<div class="card-panel-icon-wrapper icon-message">
							<svg-icon icon-class="message" class-name="card-panel-icon"/>
						</div>
						<div class="card-panel-description">
							<div class="card-panel-text">未发货单</div>
							<count-to :start-val="0" :end-val="waitStockCount" :duration="3000"
							          class="card-panel-num"/>
						</div>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<div id="sumChart" class="chart" style="height: 400px; padding: 20px"/>
			</el-col>
			<el-col :span="12">
				<div id="orderChart" class="chart" style="height: 400px; padding: 20px"/>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import {info} from '@/api/dashboard'
	import CountTo from 'vue-count-to'
	// import dataJson from './data.json'

	let echarts = require('echarts')
	export default {
		components: {
			CountTo
		},
		data() {
			return {
				daysOrder: 0,
				daysSum: 0,
				goodsCount: 0,
				waitStockCount: 0
			}
		},
		created() {
			info().then(res => {
				const orderChart = echarts.init(document.getElementById('orderChart'))
				const sumChart = echarts.init(document.getElementById('sumChart'))
				this.daysOrder = res.data.daysOrder
				this.daysSum = res.data.daysSum
				this.waitStockCount = res.data.waitStockCount
				this.goodsCount = res.data.goodsCount
				// 每日订单走势
				orderChart.setOption({
					title: {text: '7日订单'},
					legend: {
						data: ['订单数'],
						right: 1
					},
					yAxis: [
						{
							name: '订单数',
							type: 'value',
							axisLine: {
								show: true
							},
							axisTick: {
								show: true
							},
							axisLabel: {
								color: '#666',
								fontSize: 12
							}
						}
					],
					xAxis: {
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#666',
							fontSize: 12,
							margin: 12
						},
						data: this.daysOrder[0]
					},
					series: [
						{
							name: '订单数',
							yAxisIndex: 0,
							data: this.daysOrder[1],
							type: 'bar',
							color: '#00B5FF',
							barWidth: 30
						}
					]
				})
				// 订单金额走势
				sumChart.setOption({
					title: {text: '7日成交金额'},
					legend: {
						data: ['成交金额'],
						right: 1
					},
					yAxis: [
						{
							name: '成交金额',
							type: 'value',
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: '#666',
								fontSize: 12
							}
						}
					],
					xAxis: {
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#666',
							fontSize: 12,
							margin: 12
						},
						data: this.daysSum[0]
					},
					series: [
						{
							name: '成交金额',
							yAxisIndex: 0,
							data: this.daysSum[1],
							type: 'line',
							color: '#20B2AA'
						}
					]
				})
			})
		},
		methods: {
			handleSetLineChartData(type) {
				this.$emit('handleSetLineChartData', type)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);

		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
		}
	}

	.panel-group {
		padding: 0 20px;

		.card-panel-col {
			margin-bottom: 20px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
			border-color: rgba(0, 0, 0, 0.05);

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-people {
					background: #40c9c6;
				}

				.icon-message {
					background: #36a3f7;
				}

				.icon-money {
					background: #f4516c;
				}

				.icon-shoppingCard {
					background: #34bfa3;
				}
			}

			.icon-people {
				color: #40c9c6;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shoppingCard {
				color: #34bfa3;
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: left;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}
</style>
